<template>
  <div class="contarin">
    <div class="contarin_fl">
      <div class="contarin_dq">
        <!-- 地区 -->
        <span>地区:</span>
        <ul>
          <li :class="{active: area == '全部' ? true : false}" @click="area='全部'">全部</li>
          <li :class="{active: area == '内地' ? true : false}" @click="area='内地'">内地</li>
          <li :class="{active: area == '港台' ? true : false}" @click="area='港台'">港台</li>
          <li :class="{active: area == '欧美' ? true : false}" @click="area='欧美'">欧美</li>
          <li :class="{active: area == '日本' ? true : false}" @click="area='日本'">日本</li>
          <li :class="{active: area == '韩国' ? true : false}" @click="area='韩国'">韩国</li>
        </ul>
      </div>
      <div class="contarin_lx">
        <!-- 类型 -->
        <span>类型:</span>
        <ul>
          <li :class="{active: type == '全部' ? true : false}" @click="type='全部'">全部</li>
          <li :class="{active: type == '官方版' ? true : false}" @click="type='官方版'">官方版</li>
          <li :class="{active: type == '原声' ? true : false}" @click="type='原声'">原声</li>
          <li :class="{active: type == '现场版' ? true : false}" @click="type='现场版'">现场版</li>
          <li :class="{active: type == '网易出品' ? true : false}" @click="type='网易出品'">网易出品</li>
        </ul>
      </div>
      <div class="contarin_px">
        <!-- 排序 -->
        <span>排序:</span>
        <ul>
          <li :class="{active:order == '上升最快' ? true : false}" @click="order='上升最快'">上升最快</li>
          <li :class="{active:order == '最热' ? true : false}" @click="order='最热'">最热</li>
          <li :class="{active:order == '最新' ? true : false}" @click="order='最新'">最新</li>
        </ul>
      </div>
    </div>
    <div class="contarin_mv_s">
      <div class="contarin_mv" v-for="(item,index) in lists" :key="index">
        <div class="contarin_mv_icon">
          <p>{{item.playCount}}</p>
          <span class="el-icon-video-play"></span>
          <img :src="item.cover" />
        </div>
        <span>{{item.name}}</span>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="10"
      @current-change="currentClick"
      class="centers"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 总页数
      total: 40,
      // 页码
      page: 1,
      // 页容量
      limit: 10,
      // 地区
      area: "全部",
      // 类型
      type: "全部",
      // 排序
      order: "上升最快",
      lists: null
    };
  },
  watch: {
    area() {
      this.contarinAxios();
    },
    type() {
      this.contarinAxios();
    },
    order() {
      this.contarinAxios();
    }
  },
  methods: {
    contarinAxios() {
      this.$http({
        method: "get",
        url: "/mv/all",
        params: {
          area: this.area,
          type: this.type,
          order: this.order,
          limit: this.limit,
          offset: (this.page - 1) * this.limit
        }
      }).then(res => {
        this.lists = res.data.data;
        // 播放数量
        for (let i = 0; i < this.lists.length; i++) {
          let w = this.lists[i].playCount;
          let str = "";
          if (w > 10000) {
            str = w / 1000 + "W";
          }
          this.lists[i].playCount = str;
        }
        if (res.data.count) {
          this.total = res.data.count;
        }
      });
    },
    currentClick(pg) {
      this.page = pg;
      this.contarinAxios();
    }
  },
  created() {
    this.contarinAxios();
  }
};
</script>

<style lang="less" scoped>
.contarin {
  width: 1000px;
  margin: 0 auto;
  .contarin_fl {
    margin-left: 200px;
  }
  .contarin_dq,
  .contarin_lx,
  .contarin_px {
    display: flex;
    span {
      font-size: 15px;
      margin: 20px 0;
      font-weight: 550;
    }
    ul {
      margin-left: 20px;
      font-size: 15px;
      display: flex;
      li {
        margin: 20px 25px;
        color: #ccc;
        padding: 5px 10px;
        cursor: pointer;
      }
      .active {
        background-color: rgba(240, 208, 213, 0.5);
        border-radius: 10px;
        color: rgb(233, 51, 81);
      }
    }
  }
  .contarin_mv {
    width: 180px;
    margin-top: 5px;
    .contarin_mv_icon {
      width: 180px;
      display: flex;
      justify-content: center;
      position: relative;
      border-radius: 10px;
      span {
        position: absolute;
        width: 180px;
        line-height: 180px;
        text-align: center;
        font-size: 50px;
        color: rgba(241, 54, 85, 0.5);
        background-color: rgba(255, 185, 196, 0.4);
        display: none;
        border-radius: 10px;
      }
      img {
        display: block;
        width: 180px;
        height: 180px;
        border-radius: 10px;
        object-fit: cover;
      }
      p {
        box-sizing: border-box;
        position: absolute;
        width: 180px;
        height: 20px;
        color: #fff;
        text-align: right;
        background-color: rgba(124, 124, 124, 0.486);
        padding-right: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: none;
      }
    }
    .contarin_mv_icon:hover span,
    .contarin_mv_icon:hover p {
      display: block;
    }
    > span {
      display: inline-block;
      width: 180px;
      height: 37px;
      margin: 5px 0;
      overflow: hidden;
      font-size: 13px;
      text-overflow: ellipsis;
    }
  }
}
.contarin_mv_s {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
li {
  list-style: none;
}
.centers {
  text-align: center;
  margin-top: 30px;
}
</style>